@extends('admin/layout/master')
@section('content')

    <h2>账号角色</h2>

    <div class="container">

        <div align="right">
            <el-button type="primary" @click="add" size="mini"><i class="iconfont icon-add"></i> 创建角色</el-button>
        </div>

        <el-table
                :data="items"
                style="width: 100%"
                v-loading="loading">
            <el-table-column
                    prop="name"
                    label=角色名称
                    width="180">
            </el-table-column>
            <el-table-column
                    label="权限"
                    >
                <template slot-scope="scope">
                    <el-tag v-for="name in scope.row.resource_names">@{{ name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="edit(scope.row)">修改</el-button>

                    <el-popover
                            placement="bottom"
                            width="160"
                            v-model="scope.row._visibleDeleteConfirm">
                        <p>确定移除除吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="scope.row._visibleDeleteConfirm = false">取消</el-button>
                            <el-button type="primary" size="mini" @click="destroy(scope.row.id);scope.row._visibleDeleteConfirm = false">确定</el-button>
                        </div>
                        <el-button slot="reference" size="small" type="danger">移除</el-button>
                    </el-popover>

                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog
            title="角色表单"
            :visible.sync="dialogVisible"
            width="50%"
            :close-on-click-modal="false"
            >
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="角色名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="权限">

                <template v-for="(res,key) in resource">
                    <div>@{{res.name}}</div>
                    <template v-if="res.children">
                        <el-checkbox-group v-model="checkedResource">
                            <el-checkbox v-for="(sub, k) in res.children" :label="k" :key="k">@{{sub.name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </template>
            </el-form-item>
        </el-form>


    <div style="text-align: center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </span>
    </el-dialog>

@stop
@section('javascript')
    <script src="{{mix('/js/manifest.js', 'assets')}}"></script>
    <script src="{{mix('/js/vendor.js', 'assets')}}"></script>
    <script src="{{mix('/js/admin.auth.role.js', 'assets')}}"></script>
@stop